// import React, {useState} from 'react'
import React from 'react'
// icon
import CoinIcon from '../../res/images/web/shared/coin.png'

// constants
import {Icon} from "antd-mobile";
import './CreditCard.css'

const CreditCard = props => {
    const {credit: {coins, price, exp, active,}, onClick} = props

    const checkBox =
        <div
            className='wallet-item-selected-check'
        >
            <Icon type='check' className='wallet-item-selected-check-icon'/>
        </div>

    const cls = `wallet-item-ctn flex-align-center ${active ? 'wallet-item-ctn-selected' : ''}`

    return (
        <div
            onClick={onClick}
            className={cls}
        >
            <div className='flex-space-between-align-center' style={{width: '100%',}}>
                <div>
                    <img src={CoinIcon} alt='coin'/>
                    <span className='wallet-item-coin'>{coins}</span>
                </div>
                <div>
                    <span className='wallet-item-price'>¥{price}</span>
                </div>
            </div>
            {/*<div >*/}
            {/*    <span className='wallet-item-exp'>赠送{exp}点经验</span>*/}
            {/*</div>*/}
            {active ? checkBox : null}
        </div>
    )
}

export default CreditCard
